<template>
  <el-row class="home" :gutter="20">
    <!--span默认一共是24，这里占8 下面占16，所以这两个分隔栏所占的宽度 是1:2-->
    <el-col :span="8" style="margin-top: 20px">
      <!--shadow属性设置卡片阴影出现的时机-->
      <el-card shadow="hover">
        <div class="">
          <img :src="userImg" style="width: 120px" />
          <div class="">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2019-10-20</span></p>
          <p>上次登录地点：<span>北京</span></p>
        </div>
      </el-card>
      <el-card style="height: 460px; margin-top: 20px">
        <el-table :data="tableData"> </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="margin-top: 20px">
      <div class="num">
        <el-card shadow="hover" :body-style="{ display: 'flex', padding: 0 }">
        </el-card>
      </div>
      <el-card shadow="hover" style="height: 280px">
        <el-card shadow="hover">
          <div >
            
          </div>
        </el-card>
      </el-card>
      <div class="graph">
        <el-card shadow="hover" style="height: 260px"> </el-card>
        <el-card shadow="hover" style="height: 260px"> </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
//import request from '../utils/request'
export default {
  data() {
    return {
      userImg: require("../assets/user.jpg"),
      tianqi:{},
      tableData: [{}],
      tableLabel: {},
    };
  },

  methods: {
    getTableData() {
      this.$axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=龙岩")
        .then(function (response) {
          console.log(response.data.data);
           this.tianqi = response.data.data;
          console.log(this.tianqi);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },

  //一进组件就会去请求后端接口 获取首页数据
  created() {
    this.getTableData();
    //  this.$axios
    //   .get("http://wthrcdn.etouch.cn/weather_mini?city=龙岩")
    //   .then(function(response) {
    //     console.log(response.data.data);
    //   })
    //   .catch(function(error) {
    //     console.log(error);
    //   });
  },
};
</script>